<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作页面的元素——获取</title>
    <style type="text/css">
        .outer{
            background-color: #ff0000;
        }
        input{
            height: 50px;
            width: 150px;
            font-size: 16px;
            font-family: 华文行楷;
            color: #00ff00;
        }

    </style>
</head>
<body>
<!--
    常用的选择器 ：
        class 选择器 ： 即 在 style 标签中使用 .名称 的方式进行 样式初始化 。然后在标记中 的 class 属性 中引用 ，如果有多个，中间使用 空格隔开即可。
        标签选择器 ： 在 style 标签中 直接使用标签的名称做为 样式初始化 的名字，那么在页面上的所有标签，都会自动加上这个样式。
        id 选择器 ： 在 style 标签中，使用 #idValue 的形式，获取到 id=idValue 的那些 元素

   选择器的练习 ： class 选择器、 id 选择器、标签选择器、后代选择器（ #container # password ）
-->
<div id="container" class="outer xxx yyy">
    <form>
        <div class="xxx">
            <input type="text" placeholder="请输入姓名" id="username" name="username">
        </div>
        <div >
            <input type="password" placeholder="请输入密码" id="password" name="password">
        </div>
    </form>
</div>

<script type="text/javascript">

    // 其实选择器 还是应用到了 JS 的一部分内容

    //  通过指定的id 获取 单个元素
    let container = document.getElementById("container") ;
    console.log( container ) ;

    // 通过标签名称获取 多个元素 , 返回一个 HTMLCollection 对象，有点类似于数组
    let divs = document.getElementsByTagName("div") ;
    console.log( divs ) ;

    // 根据 name 的值，获取元素
    document.getElementsByName("password") ;

    // 获取到 那些  class 属性中包含 指定值 的元素
    let xxx = document.getElementsByClassName("xxx") ;
    console.log( xxx ) ;


    console.log( "------------------------------") ;

    xxx = document.querySelector(".xxx") ;
    console.log( xxx ) ;

    // 返回的是一个 NodeList
    xxx = document.querySelectorAll(".xxx") ;
    console.log( xxx ) ;


    /**
     * 在 querySelector 和 querySelectorAll 中，所有的 CSS 选择器 都可以使用
     *
     */


</script>


</body>
</html>